<template>
    <edu-dialog ref="personPlanDialog" title="个人培养计划" width="80%" :autoHeight="true">
        <div class="centent-title">
            <div class="title font_style">微专业个人计划</div>
        </div>
        <div class="content-container">
            <div
                class="title"
                style="margin: 18px 0 18px 0;"
            >{{$t('minor.culturePlan.creditFinshTitle')}}</div>
            <edu-table
                class="score-table"
                :merge="true"
                :border="true"
                :data="scoreData"
                :pagination="false"
                :selection="false"
                :order="false"
            >
                <el-table-column label="课程类别" align="center" min-width="120">
                    <template slot-scope="props">{{props.row.courseType}}</template>
                </el-table-column>
                <el-table-column label="必修课程" align="center" min-width="120">
                    <template slot-scope="props">{{props.row.a}}</template>
                </el-table-column>
                <el-table-column label="选修课程" align="center" min-width="120">
                    <template slot-scope="props">{{props.row.b}}</template>
                </el-table-column>
                <el-table-column label="其它课程" align="center" min-width="80">
                    <template slot-scope="props">{{props.row.c}}</template>
                </el-table-column>
            </edu-table>
            <div class="title" style="margin: 18px 0 18px 0;">{{majorName}}专业个人培养计划</div>
            <edu-table
                class="score-table"
                :border="true"
                :merge="true"
                :data="planData"
                :pagination="false"
                :selection="false"
                :order="false"
            >
                <el-table-column prop="courseType" align="center" show-overflow-tooltip min-width="120" label="课程类别"></el-table-column>
                <el-table-column prop="courseCode" align="center" show-overflow-tooltip min-width="120" label="课程代码"></el-table-column>
                <el-table-column align="center" min-width="180" show-overflow-tooltip label="课程名称">
                    <template slot-scope="props">{{props.row.name}}</template>
                </el-table-column>
                <el-table-column prop="credits" align="center" min-width="100" label="学分"></el-table-column>
                <el-table-column prop="week" align="center" min-width="120" label="学时/周数"></el-table-column>
                <el-table-column align="center" min-width="120" label="考试/考查">
                    <template slot-scope="props">
                        <span>{{props.row.examModeName}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" align="center" show-overflow-tooltip min-width="200" label="备注"></el-table-column>
                <el-table-column prop="selCourse" align="center" show-overflow-tooltip min-width="120" label="选课情况"></el-table-column>
                <el-table-column prop="score" align="center" min-width="100" label="成绩"></el-table-column>
                <el-table-column prop="isScorePass" align="center" min-width="120" label="完成情况"></el-table-column>
                <el-table-column align="center" min-width="120" label="缴费情况">
                    <template slot-scope="props">
                        <span
                            :class="props.row.isPay==='未缴费'?'not-pay':'is-pay'"
                        >{{props.row.isPay}}</span>
                    </template>
                </el-table-column>
            </edu-table>
        </div>
        <span slot="buttons">
            <el-button @click="closeWorkFlowDialog">关闭</el-button>
        </span>
    </edu-dialog>
</template>
<script>
import {
    findMinorStudentCulture,
    getMinorCulturePlan,
    findUserInfoByIdType,
    downloadimage,
    setCulturePlan,
    catCulturePlan,
    findAllMinorStudentCulture
} from "common/src/api/minor/minorCulturePlanManager";
export default {
    name: "CustomPlanDialog",
    props: {
        studentId: {
            type: String,
            default: ""
        },
        entranceTerm: {
            type: String,
            default: ""
        },
        isShow: {
            type: Boolean,
            default: false
        },
        showChapter: {
            type: Boolean,
            default: false
        },
        byStuSelf: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            cultureSchemeId: "",
            baseInfo: true,
            majorName: "",
            studentData: {},
            scoreData: [],
            planData: [],
            planDialogData: [],
            plan: [],
            courseDetail: {},
            coursePlanList: [],
            coursePlanValue: "",
            params: {},
            term: "",
            schemeCheck: false,
            headData: [],
            relGroups: [],
            errorMsg: ""
        };
    },
    mounted() {
        this.getCustomData();
        this.getBaseInfo();
        this.getCoursePlanList();
    },
    methods: {
        courseChange(val) {
            let entranceTerm = this.coursePlanList
                .filter(el => {
                    return el.value == val;
                })
                .map(el => {
                    return el.value;
                });
            this.term = entranceTerm;
            this.getCustomData();
        },
        getCoursePlanList() {
            this.majorName = "";
            if (this.isShow) return;
            let params = { studentId: this.studentId };
            findAllMinorStudentCulture(params).then(({ code, data }) => {
                if (code == 200) {
                    this.majorName = data[0].majorNameCn;
                    this.coursePlanList = data.map(el => {
                        return {
                            label: el.cultureName,
                            value: el.entranceTerm
                        };
                    });
                    if (this.coursePlanList.length > 0) {
                        this.coursePlanValue = this.coursePlanList[0].label;
                    }
                }
            });
        },
        goBack() {
            this.$emit("goBack");
        },
        scoreCompare() {
            let flag = true;
            let label = "";
            let credit = "";
            this.headData.forEach(el => {
                let count = 0;
                this.planDialogData
                    .filter(item => {
                        return (
                            item.labelId == el.labelId &&
                            item.selCourse == "已选"
                        );
                    })
                    .forEach(item => {
                        count += parseFloat(item.credits);
                    });
                if (parseFloat(el.credit) > count) {
                    if (flag) {
                        flag = false;
                        label = el.label;
                        credit = el.credit;
                    }
                }
            });
            return {
                flag,
                label,
                credit
            };
        },
        resolveDivide(divideCourse, divideRule) {
            let divideFlag = true;
            let selectCourse = divideCourse.filter(el => {
                return el.selCourse == "已选";
            });
            if (selectCourse.length == 0) {
                return {
                    divideCourse,
                    divideFlag,
                    divideRule
                };
            } else if (divideRule.type == 0) {
                // 门数限制
                if (selectCourse.length != divideRule.minNum) {
                    divideFlag = false;
                }
            } else if (divideRule.type == 1) {
                let count = 0;
                selectCourse.forEach(el => {
                    count += parseFloat(el.credits);
                });
                // 学分限制
                if (divideRule.expression == 1) {
                    // 学分大于等于设定值 divideRule.minCredits
                    if (count < divideRule.minCredits) {
                        divideFlag = false;
                    }
                } else if (divideRule.expression == 2) {
                    if (count != divideRule.minCredits) {
                        divideFlag = false;
                    }
                }
            }
            return {
                divideCourse,
                divideFlag,
                divideRule
            };
        },
        getBaseInfo() {
            findUserInfoByIdType(this.studentId, 1).then(({ data, code }) => {
                if (code === 200) {
                    if (data && data.photo) {
                        let photo = data.photo;
                        downloadimage(photo).then(res => {
                            this.imageUrl = res.data;
                        });
                    }
                }
            });
        },
        getCustomData() {
            let params = {
                id: this.studentId,
                entranceTerm:
                    this.entranceTerm || this.studentData.entranceTerm,
                byStuSelf: this.byStuSelf,
                planType: this.isShow ? 1 : 2
            };
            if (this.showChapter) {
                params.byStuSelf = 1;
            }
            if (this.term) {
                params.byStuSelf = 2;
                params.entranceTerm = this.term;
            }
            getMinorCulturePlan(params)
                .then(({ code, data, msg }) => {
                    if (code === 200) {
                        this.showPlanFlag = true;
                        this.getScoreData(data);
                        this.getPlanData(data);
                    } else {
                        this.$nextTick(() => {
                            this.errorMsg = msg;
                            this.showPlanFlag = false;
                        });
                    }
                })
                .catch(() => {
                    this.$nextTick(() => {
                        this.showPlanFlag = false;
                    });
                });
        },
        getScoreData({ minorCoursesLabelList, creditSumMap }) {
            let newData = minorCoursesLabelList.map(el => {
                return {
                    completedCredit: el.completedCredit,
                    credit: el.credit
                };
            });
            if (newData.length === 0) {
                return;
            }
            this.scoreData = [
                {
                    courseType: "学分小计",
                    a: `${newData[0].completedCredit}/${newData[0].credit}`,
                    b: `${newData[1].completedCredit}/${newData[1].credit}`,
                    c: `${newData[2].completedCredit}/${newData[2].credit}`
                },
                {
                    courseType: "学分总计",
                    a: `${creditSumMap.completedCreditSum}/${
                        creditSumMap.creditSum
                    }`,
                    columnList: [
                        {
                            index: 1,
                            rowspan: 1,
                            colspan: 3
                        },
                        {
                            index: 2,
                            rowspan: 1,
                            colspan: 0
                        },
                        {
                            index: 3,
                            rowspan: 1,
                            colspan: 0
                        }
                    ]
                }
            ];
        },
        getPlanData({
            minorCoursesLabelList,
            courseLabelRelationList,
            minorRelationCoursesRelationList,
            minorCulturePlanList,
            relGroups
        }) {
            this.relGroups = relGroups;
            this.plan = minorCulturePlanList;
            this.headData = minorCoursesLabelList;
            let headData = minorCoursesLabelList;
            let contentData = [];
            let tableData = [];
            headData.forEach((el, index) => {
                contentData = courseLabelRelationList.filter(item => {
                    return el.labelId === item.labelId;
                });
                contentData = contentData.map((item, index) => {
                    item.courseType = el.label;
                    item.columnList = [];
                    item.columnList.push({
                        index: 0,
                        rowspan: index === 0 ? contentData.length : 0,
                        colspan: 1
                    });
                    minorCulturePlanList
                        .filter(el => {
                            return el.courseLabelRelationId == item.id;
                        })
                        .map(e => {
                            item.selCourse = e.selCourse == 1 ? "已选" : "未选";
                            item.select = e.selCourse == 1 ? "退选" : "选择";
                            item.score = e.score;
                            item.isScorePass =
                                e.isScorePass == 1 ? "已完成" : "未完成";
                            item.isPay = e.isPay == 1 ? "已缴费" : "未缴费";
                        });
                    item.week = `${item.period}/${item.weeks}`;
                    item.examModeName = item.examMode == 1 ? "考查" : "考试";
                    return item;
                });
                let newData = this.resolveDivideData(contentData);
                tableData = [...tableData, ...newData];
            });
            let columnList = [];
            for (let i = 0; i < 11; i++) {
                let index = i;
                let rowspan = 1;
                let colspan = 1;
                if (i == 0) {
                    colspan = 3;
                } else if (i == 3 || i == 4) {
                    colspan = 1;
                } else if (i == 5) {
                    colspan = 6;
                } else {
                    colspan = 0;
                }
                columnList.push({ index, rowspan, colspan });
            }
            let credits = 0;
            let weeks = 0;
            let period = 0;
            courseLabelRelationList.forEach(el => {
                credits += el.credits ? parseFloat(el.credits) : 0;
                weeks += el.weeks ? parseFloat(el.weeks) : 0;
                period += el.period ? parseFloat(el.period) : 0;
            });
            tableData.push({
                courseType: "总计",
                credits,
                week: `${period}/${weeks}`,
                columnList
            });
            this.planData = [...tableData];
            this.setPaymentParams();
        },
        resolveDivideData(contentData) {
            let newData = contentData.sort((a, b) => {
                return a.courseGroupId - b.courseGroupId;
            });
            let arr = Array.from(
                new Set(
                    contentData.map(el => {
                        return el.courseGroupId;
                    })
                )
            );
            let newArr = [];
            arr.map(el => {
                let sameCourseGroup = newData.filter(item => {
                    return item.courseGroupId === el;
                });
                sameCourseGroup = sameCourseGroup.map((row, index) => {
                    if (row.courseGroupId != "" && sameCourseGroup.length > 1) {
                        row.remark = row.courseGroupName;
                        if (index === 0) {
                            row.columnList.push({
                                index: 6,
                                rowspan: sameCourseGroup.length,
                                colspan: 1
                            });
                        } else {
                            row.columnList.push({
                                index: 6,
                                rowspan: 0,
                                colspan: 1
                            });
                        }
                    }
                    return row;
                });
                newArr = [...newArr, ...sameCourseGroup];
            });
            return newArr;
        },
        closeWorkFlowDialog() {
            this.$refs.personPlanDialog.close();
        }
    }
};
</script>
<style lang="scss" scoped>
.custom-plan {
    .back {
        text-align: center;
        margin: 24px;
    }

    .my-centent-title,
    .my-cultrue-title {
        color: red;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 0 60px;
    }
    .my-cultrue-title {
        color: blue;
    }
    .align-right {
        display: flex;
        justify-content: flex-end;
    }
    .a-blue {
        color: blue;
    }
    .a-red {
        color: red;
    }
    .title {
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #2b3b4e;
        letter-spacing: 0;
        line-height: 20px;
        margin-bottom: 24px;
    }
    .basic-div {
        display: flex;
        vertical-align: middle;
        align-items: center;
        margin-bottom: 12px;
        .head-portrait {
            width: 40px;
            height: 40px;
            margin-right: 12px;
        }
        .span-style {
            font-size: 14px;
        }
    }
    .line-div {
        border: 1px solid #f1f1f1;
        margin: 0 0 20px 0;
    }
    .centent-title {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }
    .content-container {
        padding: 0 60px;
        .title {
            font-family: PingFangSC-Medium;
            font-size: 18px;
            color: #2b3b4e;
            letter-spacing: 0;
            line-height: 20px;
            margin-bottom: 16px;
        }
        .score-table {
            margin-bottom: 32px;
            .not-pay {
                color: red;
            }
        }
    }
}
</style>
<style>
.font_style {
    font-size: 18px;
    color: #2b3b4e;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    margin-bottom: 15x;
}
</style>


